{extend name="main"}
{block name="style"}
<style type="text/css">
    html{background-image: url(__TEMPLATE_STATIC__/bg.png);height: 100%;background-repeat: no-repeat;background-size: 100% 100%;}
    body,#app{background-color:transparent;height: 100%;}
    #app{display: -webkit-box; -webkit-box-orient: vertical; -webkit-flex-flow: column; }
    .login-window{width: 740px;height: 460px;}
    .w-280px{width: 280px;background-color: #F8FCFF;color: #999999;}
    .text-BBBBBB{color: #BBBBBB}
    .login-tabs{width: 315px;}
    .transition{transition: .3s all;}
    .el-input-group--append .el-input__inner{border-right: 0px;}
    .el-input-group--append .el-input-group__append{border-radius: 0;}
	.el-input__inner{border-color: #DCDFE6!important;}
	.bg-F5F6FA{background-color: #F5F6FA;}
	.bg-F2F8FE{background-color: #F2F8FE;}
	.w-330px{width: 330px;}
</style>
{/block}
{block name="body"}
<div class="flex1 wrap h-100 flex-v-center">
	<div>
        <div class="text-right pb-4">
            <a href="{xycms:web name='url'/}" class="text-white">返回网站首页>></a>
        </div>
	    <div class="flex bg-white login-window overflow-hidden">
	        <div class="p-4 w-280px">
	            <img src="{xycms:web name='logo'}" alt="" class="w-75" style="max-height: 50px;">
	            <div class="p-4">
	                <div class="py-3 flex flex-center">
	                    <div>
	                        <img src="__TEMPLATE_STATIC__/icon/icon_login1.png" alt="" width="32" height="32">
	                    </div>
	                    <div class="pl-3">
	                        <div class="h6 ">简历填写 · 便捷</div>
	                        <div class="text-BBBBBB">简历是工作的敲门砖</div>
	                    </div>
	                </div>
	                <div class="py-3 flex flex-center">
	                    <div>
	                        <img src="__TEMPLATE_STATIC__/icon/icon_login2.png" alt="" width="32" height="32">
	                    </div>
	                    <div class="pl-3">
	                        <div class="h6">职位优选 · 全面</div>
	                        <div class="text-BBBBBB">各大行业职位任你选</div>
	                    </div>
	                </div>
	                <div class="py-3 flex flex-center">
	                    <div>
	                        <img src="__TEMPLATE_STATIC__/icon/icon_login3.png" alt="" width="32" height="32">
	                    </div>
	                    <div class="pl-3">
	                        <div class="h6">职位投递 · 快速</div>
	                        <div class="text-BBBBBB">在线职位及时投递</div>
	                    </div>
	                </div>
	                <div class="py-3 flex flex-center">
	                    <div>
	                        <img src="__TEMPLATE_STATIC__/icon/icon_login4.png" alt="" width="32" height="32">
	                    </div>
	                    <div class="pl-3">
	                        <div class="h6">投递反馈 · 高效</div>
	                        <div class="text-BBBBBB">查看简历记录早知道</div>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <div class="flex-1 wrap h-100 flex-v-center px-3">
				<div>
			    	<el-form @submit.native.prevent="register()" :model="registerTabs.form"
			    	class="w-330px">
					  <el-form-item class="input-item">
					  	<div class="flex text-v-center text-666666">
						  <div class="bg-F5F6FA mr-2  flex-1 pointer transition font-weight-600"
						  :class="{'text-primary bg-F2F8FE':registerTabs.form.role_type==0}"
						  @click="registerTabs.form.role_type=0">我要找工作</div>
						  <div class="bg-F5F6FA ml-2  flex-1 pointer transition font-weight-600"
						  :class="{'text-primary bg-F2F8FE':registerTabs.form.role_type==1}"
						  @click="registerTabs.form.role_type=1">我要招聘</div>
						</div>
					  </el-form-item>
					  <el-form-item class="input-item">
					    <el-input v-model="registerTabs.form.username"
					    :disabled="registerTabs.btn.loading"
					    autocomplete="off" placeholder="请输入手机号码"
					    class="rounded-0">
				    	</el-input>
					  </el-form-item>
			      		<transition enter-active-class="animated slideInDown" leave-active-class="animated slideOutUp">
						  	<el-form-item v-if="loginTabs.is_imgcode&&loginTabs.captcha_type==1">
						        <div class="GeeTestCaptcha">
						            <div ref="GeeTestCaptchaWait" class="text-secondary">正在加载验证码......</div>
						        </div>
						  	</el-form-item>
						  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==2">
						        <div class="vaptchaContainer">
									<div class="vaptcha-init-main">
									    <div class="vaptcha-init-loading">
									    <a href="/" target="_blank">
									        <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif" />
									    </a>
									    <span class="vaptcha-text">正在加载验证码...</span>
									    </div>
									</div>
								</div>
						  	</el-form-item>
						  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==3">
						  	</el-form-item>
						  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==4">
						  		<el-button 
						  		native-type="button" 
						  		:type="loginTabs.form.tsec?'success':'warning'"
						  		class="rounded-0 w-100 TencentCaptchaEl"
						  		:icon="loginTabs.form.tsec?'el-icon-circle-check':'el-icon-thumb'"
						  		:data-appid="_config.captchatsec"
						  		data-cbfn="vm.TencentCaptchaCallback">
						  			{{loginTabs.form.tsec?'验证成功':'点击验证'}}
						  		</el-button>
						  	</el-form-item>
						  	<el-form-item prop="imgcode" v-else-if="loginTabs.is_imgcode" class="input-item">
								<el-input placeholder="图形验证码" v-model="registerTabs.form.imgcode" maxlength="6"
								class="border-right-0 rounded-0">
							    	<template slot="append" class="px-0">
							    		<img src="/captcha" onclick="this.src='/captcha?t='+(new Date()).getTime()" height="30" class="captcha pointer">
							    	</template>
								</el-input>
						  	</el-form-item>
						</transition>
					  <el-form-item class="input-item">
					    <el-input v-model="registerTabs.form.vcode"
					    :disabled="registerTabs.btn.loading"
					    autocomplete="off" maxlength="6" placeholder="请输入验证码"
					    class="rounded-0">
				    		<el-link slot="append" type="primary" :disabled="registerTabs.btn.getVcode || registerTabs.btn.loading" @click="getVcode">{{registerTabs.btn.getVcodeText}}</el-link>
					    </el-input>
					  </el-form-item>
					  <el-form-item class="input-item">
					    <el-input type="password" v-model="registerTabs.form.password"
					    :disabled="registerTabs.btn.loading"
					    autocomplete="off" placeholder="设置登录密码"
					    class="rounded-0"
					    show-password>
				    	</el-input>
					  </el-form-item>
					  <el-form-item class="mb-0">
				    	<el-button native-type="submit" type="primary" class="d-block w-100 rounded-0" :disabled="registerTabs.btn.submit || registerTabs.btn.loading" :loading="registerTabs.btn.loading">{{registerTabs.btn.loading?'提交中':'注册'}}</el-button>
					  </el-form-item>
					</el-form>
					<div class="py-3">
					  	<div class="flex">
						    <div class="text-secondary">注册代表你已同意</div>
						  	<div class="flex-1 pl-2">
						  		<a href="/article/content/user_agreement.html" class="el-link el-link--primary" target="_blank">《用户协议》</a>
						    </div>
					    </div>
					</div>
				</div>
	        </div>
	    </div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var CaptchaResultObj;
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			registerTabs:{
				btn:{
					loading:false,
					submit:true,
					getVcode:true,
					getVcodeText:'获取验证码',
					vcodeTimeIntervalId:null,
					vcodeDefaultTime:_config.vcodeDefaultTime,
					vcodeTime:_config.vcodeDefaultTime
				},
				form:{
					username:'',
					password:'',
					vpassword:'',
					role_type:0,
					cache:'',
					imgcode:'',
					tsec:null,
					vcode:''
				}
			}
		},
		watch:{
		    view:XYBase.viewWatch,
			registerTabs:{
				handler(val,oldVal){
					if (!val.btn.vcodeTimeIntervalId && val.form.username){
						if(XYBase.pattern.mobile.test(val.form.username)){
							val.btn.getVcode=false;
						}else val.btn.getVcode=true;
					}else val.btn.getVcode=true;
					if (XYBase.pattern.mobile.test(val.form.username)
						&&val.form.vcode
						&&val.form.password) {
						val.btn.submit=false;
					}else val.btn.submit=true;
				},
				deep:true
			},
		},
		created(){
			this.loginTabs.is_imgcode=1;
			XYBase.created(this);
		},
		methods:XYBase.methods({
			getVcode(){
				var _this=this;
				var Data=_this.registerTabs.form,
					btnData=_this.registerTabs.btn;
					if(this.loginTabs.is_imgcode){
						switch(this.loginTabs.captcha_type){
							case 1:
								if (CaptchaResultObj)
		          				Data.geetest=CaptchaResultObj.getValidate();
							break
							case 2:
								if (CaptchaResultObj)
		          				Data.vaptcha=CaptchaResultObj.getToken();
							break
						}
					}
					_this.sendVcode(Data,btnData);
			},
			register(){
				var _this=this;
				var Data=_this.registerTabs.form,
					url='/register';
				if (!Data.username)
					return XYBase.warning('请输入账号');
				if(!XYBase.pattern.mobile.test(Data.username))
					return XYBase.warning('请输入正确的手机号');
				if (!_this.registerTabs.form.vcode)
					return XYBase.warning('请输入验证码');
				if(!Data.password)
					return XYBase.warning('请设置登录密码');
				if(this.loginTabs.is_imgcode){
					switch(this.loginTabs.captcha_type){
						case 1:
							if (CaptchaResultObj)
	          				Data.geetest=CaptchaResultObj.getValidate();
						break
						case 2:
							if (CaptchaResultObj)
	          				Data.vaptcha=CaptchaResultObj.getToken();
						break
					}
				}
				Data.is_username_type='mobile';
				this.registerTabs.btn.loading=true;
				$.ajax({
					url:url,
					type:'post',
					data:Data,
					dataType:'json',
					error:function(err){
						_this.registerTabs.btn.loading=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								_this.userInfo=ret.data;
								window.location.reload();
							}else{
								_this.registerTabs.btn.loading=false;
								XYBase.msg(ret.msg);
							}
						}else{
							_this.registerTabs.btn.loading=false;
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
		})
	});
</script>
{/block}